<template>
    <div class="user-wrapper user-index">
      <van-icon class="leave_page" name="cross" @click="leave" />
      <!-- 用户信息 -->
      <div class="user-overview">
        <div class="avatar">
          <img src="../../assets/images/tcb-logo.png" alt="" class="avatar-img">
        </div>
        <div class="user-name">
          <p class="nickname">{{username}}</p>
          <span class="user-level free-user">{{$t('User.free_version')}}</span>
          <span class="user-level">{{$t('User.free_version')}}</span>
        </div>
        <router-link class="user-upgrade" to>
          <i class="icon-upgrade"></i>
          {{$t('User.upgrade_vip')}}
        </router-link>
      </div>
      <!-- 分享广告 -->
      <div class="share-ad" @click="share">
        <img src="../../assets/images/ad@2x.png" alt="">
      </div>
      <!-- 导航分组 -->
      <van-cell-group>
        <van-cell is-link :to="{ name: 'user-vip' }">
          <template slot="title">
            <img class="nav-ico" src="../../assets/images/vip@2x.png" alt="">
            {{$t('User.vip_center')}}
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-cell is-link :to="{ name: 'user-account' }">
          <template slot="title">
            <img class="nav-ico" src="../../assets/images/account@2x.png" alt="">
            {{$t('User.account')}}
          </template>
        </van-cell>
        <van-cell is-link :to="{ name: 'user-setup' }">
          <template slot="title">
            <img class="nav-ico" src="../../assets/images/setup@2x.png" alt="">
            {{$t('User.setup')}}
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-cell is-link :to="{ name: 'user-msg' }">
          <template slot="title">
            <img class="nav-ico" src="../../assets/images/about@2x.png" alt="">
            {{$t('User.msg')}}
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-cell is-link :to="{ name: 'user-wallet' }">
          <template slot="title">
            <img class="nav-ico" src="../../assets/images/wallet@2x.png" alt="">
            {{$t('User.my_wallet')}}
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-cell is-link :to="{ name: 'user-report' }">
          <template slot="title">
            <img class="nav-ico" src="../../assets/images/report@2x.png" alt="">
            {{$t('User.feedback')}}
          </template>
        </van-cell>
        <van-cell is-link :to="{ name: 'user-about' }">
          <template slot="title">
            <img class="nav-ico" src="../../assets/images/about@2x.png" alt="">
            {{$t('User.aboutus')}}
          </template>
        </van-cell>
      </van-cell-group>
    </div>
</template>

<script>
export default {
  data() {
    return {
      username: '台词宝',
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    // 关闭当前 webview
    leave() {
      this.$jsBridge.JsBackCurPage('user');
    },
    // 获取当前用户信息
    getUserInfo() {
      this.$API.user.getUserInfo();
    },
    // 分享广告
    share() {
      this.$jsBridge.JsCallShareDialog();
    },
  }
};
</script>

<style lang="less" scoped>
  .user-index{padding-top: 0;}
  .leave_page{
    font-size: 44px;
    position: absolute;
    top: 30px;
    left: 50%;
    z-index: 20;
    transform: translate(-335px, 0);
  }
  .user-overview{
    display: flex;
    position: relative;
    padding:120px 40px 30px;
    background: #fff;
  }
  .avatar{
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50%;
  }
  .avatar-img{
    max-width: 100%;
    max-height: 100%;
  }
  .user-name{
    margin-left: 30px;
  }
  .nickname{
    font-size:@font-size-lg;
    font-weight:bold;
    color:#333;
    width: 300px;
    height:34px;
    line-height:34px;
    margin:10px 0 14px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .user-level{
    display: inline-block;
    width:120px;
    height:36px;
    line-height:36px;
    font-size:@font-size-sm;
    font-weight:bold;
    text-align: center;
    border-radius:12px;
    background:linear-gradient(-39deg,rgba(228,157,21,1),rgba(239,193,104,1));
    color: #fff;
  }
  .free-user{background:linear-gradient(-45deg,rgba(172,172,172,1),rgba(198,198,198,1));}
  .user-upgrade{
    position: relative;
    display: inline-block;
    margin-left: auto;
    margin-top: 24px;
    width: 154px;
    height: 54px;
    line-height: 54px;
    text-align: center;
    background:linear-gradient(-39deg,rgba(228,157,21,1),rgba(239,193,104,1));
    box-shadow:0 6px 7px 1px rgba(255,168,0,0.25);
    border-radius:12px;
    font-size:26px;
    font-weight:bold;
    color:#fff;
  }
  .icon-upgrade{
    width: 36px;
    height: 32px;
    position:absolute;
    top: -22px;
    left: -12px;
    background: url(../../assets/images/vip-ico@2x.png) no-repeat;
    background-size: cover;
  }

  .share-ad{
    margin: 25px 30px 0;
    img{
      display:block;
      width: 100%;
    }
  }
  .van-cell-group{
    margin-bottom: 20px;
    background: none;
  }
  .van-cell{
    padding:0 40px;
    font-size:@font-size-md;
    font-weight:bold;
    color:#333;
    height: 88px;
    line-height:88px;
    align-items: center;
  }
  .nav-ico{
    width: 50px;
    height: 50px;
    margin-right: 20px;
    vertical-align: middle;
  }
</style>
